﻿@twitter-color: #55acee;
@skype-color: #00aff0;
@linkedin-color: #0976b4;
@googleplus-color: #dd4b39;
@youtube-color: #b31217;
@flickr-color: #ff0084;
@facebook-color: #3b5998;
@pinterest-color: #cb2027;
@instagram-color: #517fa4;
@vimeo-color: #aad450;
@tumblr-color: #32506d;
@soundcloud-color: #ff3a00;
@foursquare-color: #0072b1;
@dribbble-color: #ea4c89;
@behance-color: #053eff;
@vine-color: #00a478;
@stumbleupon-color: #f74425;
@mailto-color: #666;

.icon-variant(@color) {
    background-color: @color;
    &:hover {
        background-color: darken(@color, 10%);
    }
}

.social-il {
    &.colored {
        li a {
            color: #fff;
            &:hover {
                color: #fff;
            }
        }

        .twitter a {
            .icon-variant(@twitter-color);
        }

        .skype a {
            .icon-variant(@skype-color);
        }

        .linkedin a {
            .icon-variant(@linkedin-color);
        }

        .googleplus a {
            .icon-variant(@googleplus-color);
        }

        .youtube a {
            .icon-variant(@youtube-color);
        }

        .flickr a {
            .icon-variant(@flickr-color);
        }

        .facebook a {
            .icon-variant(@facebook-color);
        }

        .pinterest a {
            .icon-variant(@pinterest-color);
        }

        .instagram a {
            .icon-variant(@instagram-color);
        }

        .vimeo a {
            .icon-variant(@vimeo-color);
        }

        .tumblr a {
            .icon-variant(@tumblr-color);
        }

        .soundcloud a {
            .icon-variant(@soundcloud-color);
        }

        .foursquare a {
            .icon-variant(@foursquare-color);
        }

        .dribbble a {
            .icon-variant(@dribbble-color);
        }

        .behance a {
            .icon-variant(@behance-color);
        }

        .vine a {
            .icon-variant(@vine-color);
        }

        .stumbleupon a {
            .icon-variant(@stumbleupon-color);
        }

        .mailto a {
            .icon-variant(@mailto-color);
        }
    }
}
